<template>
  <el-dialog
    :title="title"
    :visible.sync="flag"
    @close="close"
    @opened="opened"
    :close-on-click-modal="false"
  >
    <vueForm
      :formItem="formItem"
      :formData="form_data"
      :formHandler="formHandler"
      ref="vueForm"
    >
      <template v-slot:logo>
        <div class="upload-img-wrap">
          <div class="upload-img">
            <img v-show="logo_current" :src="logo_current" />
          </div>
          <ul class="img-list">
            <li
              v-for="(item, index) in brandLogo"
              :key="index"
              @click="logo_current = item.img"
            >
              <img :src="item.img" />
            </li>
          </ul>
        </div>
      </template>
    </vueForm>
  </el-dialog>
</template>

<script>
import vueForm from "@/components/form/index";
import { getBrandLogo, brandAdd } from "@/request/brand";
import { messageFun } from "@/utils/element";
export default {
  props: {
    title: {
      type: String,
      default: () => "新增",
    },
    flagVisible: {
      type: Boolean,
      default: () => false,
    },
    detailData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      form_data: {
        nameCh: "",
        nameEn: "",
        imgUrl: "",
        status: false,
      },
      formItem: [
        {
          type: "Input",
          label: "品牌中文",
          placeholder: "请输入品牌中文",
          prop: "nameCh",
          required: true,
        },
        {
          type: "Input",
          label: "品牌英文",
          placeholder: "请输入品牌英文",
          prop: "nameEn",
          required: true,
        },
        {
          type: "Slot",
          slotName: "logo",
          prop: "logo",
          label: "LOGO",
        },
        {
          type: "Radio",
          label: "禁启用",
          prop: "status",
          required: true,
          options: this.$store.state.config.radio_disabled,
        },
      ],
      formHandler: [
        {
          type: "primary",
          label: "确认",
          key: "1",
          handler: () => this.onSubmit("vueForm"),
        },
      ],
      flag: false,
      disabledForm: false,
      brandLogo: [],
      logo_current: "",
    };
  },
  components: {
    vueForm,
  },
  methods: {
    onSubmit() {
      this.$refs.vueForm.$refs.form.validate(async (status) => {
        if (status) {
          this.form_data.imgUrl = this.logo_current;
          const { data } = await brandAdd(this.form_data);
          if (data && data.resCode === 0) {
            messageFun(data.message, "success");
            this.resetForm("form");
            this.flag = false;
            this.$emit("getCarsBrandList");
          } else {
            messageFun(data.message);
          }
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs.vueForm.$refs[formName].resetFields();
    },
    close() {
      this.$emit("update:flagVisible", false); // {}
      this.disabledForm = false;
    },
    async opened() {
      if (this.brandLogo.length > 0) return;
      const { data } = await getBrandLogo();
      if (data && data.resCode === 0) {
        this.brandLogo = data.data;
      } else {
        messageFun("获取失败");
      }
    },
  },
  watch: {
    flagVisible(newValue) {
      this.flag = newValue;
    },
    detailData(newValue) {
      this.form_data = newValue;
      this.logo_current = newValue.imgUrl;
      this.disabledForm = true;
    },
  },
};
</script>